<template>
  <div class="app-container">
    <el-form ref="userPet" :model="userPet" label-width="120px">
      <el-form-item label="id">
        <label> {{ userPet.id }} </label>
      </el-form-item>
      <el-form-item label="宠物经验药水">
        <label> {{ userPet.expNum }} </label>
      </el-form-item>
      <el-form-item label="宠物饲料">
        <label> {{ userPet.foodNum }} </label>
      </el-form-item>
      <el-form-item label="当前选择的宠物">
        <label> {{ userPet.selectTid }} </label>
      </el-form-item>
    </el-form>

    <el-table :data="petsList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="tid" width="100">
        <template slot-scope="scope">{{ scope.row.tid }}</template>
      </el-table-column>
      <el-table-column align="center" label="等级" width="50">
        <template slot-scope="scope">{{ scope.row.lv }}</template>
      </el-table-column>
      <el-table-column align="center" label="经验">
        <template slot-scope="scope">{{ scope.row.exp }}</template>
      </el-table-column>
      <el-table-column align="center" label="阶级">
        <template slot-scope="scope">{{ scope.row.step }}</template>
      </el-table-column>
      <el-table-column align="center" label="技能值">
        <template slot-scope="scope">{{ scope.row.skillVal }}</template>
      </el-table-column>
      <el-table-column align="center" label="星级">
        <template slot-scope="scope">{{ scope.row.star }}</template>
      </el-table-column>
      <el-table-column align="center" label="活跃剩余时间">
        <template slot-scope="scope">{{ scope.row.liveEndTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="是否拥有">
        <template slot-scope="scope">{{ scope.row.isHave }}</template>
      </el-table-column>
      <el-table-column align="center" label="激活状态">
        <template slot-scope="scope">{{ scope.row.status }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUserPetInfo } from '@/api/userpet'

export default {
  filters: {
    formatDate(time) {
      var hh = parseInt(time) / parseInt(3600)
      time %= 3600
      var mm = time / 60
      var ss = time % 60
      return hh + ':' + mm + ':' + ss
    }
  },
  data() {
    return {
      members: [],
      userPet: {
        id: '',
        expNum: 0,
        foodNum: 0,
        selectTid: 0,
        pets: null
      },
      petsList: []
    }
  },
  created() {
    const id = this.$route.params && this.$route.params.uid
    this.fetchData(id)
  },
  methods: {
    fetchData(id) {
      getUserPetInfo(id).then(response => {
        this.userPet = response.data.userPet
        var pets = this.userPet.pets
        this.petsList = []
        for (var idx in pets) {
          this.petsList.push(pets[idx])
        }
      })
    }
  }
}
</script>
